<template>
  <div ref="jiangxiBarTop" style="width: 100%; height: 500px" />
</template>

<script setup lang="ts">
import { ref, computed, watch, type Ref } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { delay, useDark, useECharts, type EchartOptions } from "@pureadmin/utils";

import { yiqingData } from "@/assets/map/yiqingData.js";

const { isDark } = useDark();
const theme: EchartOptions["theme"] = computed(() => {
  return isDark.value ? "dark" : "light";
});

const data_list = [];
// 疫情相关数据

// 疫情相关数据
const jiangxiData = yiqingData[12].city;
console.log(jiangxiData, "江西相关数据");
for (let i = 0; i < jiangxiData.length; i++) {
  data_list.push({
    name: jiangxiData[i].name + "市",
    value: jiangxiData[i].econNum
  });
}

for (let i = 0; i < data_list.length; i++) {
  data_list[i].value = parseInt(data_list[i].value);
}

data_list.sort((a, b) => a.value - b.value);
data_list.reverse();
console.log(data_list, "排序后的====");

// =================柱状相关配置==============================================
const jiangxiBarTop = ref<HTMLDivElement | null>(null);
const { setOptions, resize } = useECharts(jiangxiBarTop as Ref<HTMLDivElement>, {
  theme
});

const top_name = [];
const top_value = [];
for (let i = 0; i < data_list.length; i++) {
  top_name.push(data_list[i].name);
  top_value.push(data_list[i].value);
}

let index = 0;
// 数据的个数
const length = top_name.length;
const colorList = ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"];
setOptions({
  title: {
    text: "江西疫情Top",
    subtext: `数据源：新浪数据 更新时间: 2022-12-28 (目前已经停止更新)`
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  legend: {
    show: false
  },
  grid: {
    left: 100
  },
  toolbox: {
    show: true,
    feature: {
      saveAsImage: {}
    }
  },
  xAxis: {
    type: "value",

    splitLine: {
      show: false
    },
    axisLabel: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisLine: {
      show: false
    }
  },
  yAxis: {
    type: "category",
    inverse: true,
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    axisPointer: {
      label: {
        show: true,
        margin: 30
      }
    },
    data: top_name,
    axisLabel: {
      margin: 100,
      fontSize: 14,
      align: "left",
      color: "#333",
      rich: {
        a1: {
          color: "#fff",
          backgroundColor: colorList[0],
          width: 30,
          height: 30,
          align: "center",
          borderRadius: 2
        },
        a2: {
          color: "#fff",
          backgroundColor: colorList[1],
          width: 30,
          height: 30,
          align: "center",
          borderRadius: 2
        },
        a3: {
          color: "#fff",
          backgroundColor: colorList[2],
          width: 30,
          height: 30,
          align: "center",
          borderRadius: 2
        },
        b: {
          color: "#fff",
          backgroundColor: colorList[3],
          width: 30,
          height: 30,
          align: "center",
          borderRadius: 2
        }
      },
      formatter: function (params) {
        if (index == length) {
          index = 0;
        }
        index++;
        if (index - 1 < 3) {
          return ["{a" + index + "|" + index + "}" + "  " + params].join("\n");
        } else {
          return ["{b|" + index + "}" + "  " + params].join("\n");
        }
      }
    }
  },
  series: [
    {
      z: 2,
      name: "value",
      type: "bar",
      data: top_value.map((item, i) => {
        const itemStyle = {
          color: i > 3 ? colorList[3] : colorList[i]
        };
        return {
          value: item,
          itemStyle: itemStyle
        };
      }),
      label: {
        show: true,
        position: "right",
        color: "#333333",
        fontSize: 14,
        offset: [10, 0]
      }
    }
  ]
});
watch(
  () => useAppStoreHook().getSidebarStatus,
  () => {
    delay(600).then(() => resize());
    console.log("==================================");
  }
);
</script>
